<template>
 <div>
    <div class="banner" @click="bannerClick">
        <img 
        class="banner-img"
        :src="bannerImg" alt="">
        <div class="banner-info">
            <div class="banner-title">{{sightName}}</div>
            <div class="banner-number "><span class="iconfont banner-icon">&#xe67b;</span>{{this.gallaryImgs.length}}</div>
        </div>
    </div>
    <fade>
          <gallary :imgs="gallaryImgs" v-show="showGallary" @close="gallaryClose"></gallary>
    </fade>
  
 </div>

</template>
<script>
import Gallary from "common/gallary/gallary"
import Fade from "common/fade/fade"
 export default {
   props:{
       sightName:String,
       bannerImg:String,
       gallaryImgs:Array,     
   },
   data () {
     return {
         showGallary:false,
         imgs:["http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg","http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png"]
     }
   },
   methods:{
       bannerClick(){
           this.showGallary=true
       },
       gallaryClose(){
           this.showGallary=false
       }
   },
   components: {
       Gallary,
       Fade
   }
 }
</script>
<style lang="stylus" scoped>
    .banner
        position relative
        height 0
        padding-bottom 55%
        overflow hidden
        .banner-img
            width 100%
        .banner-info
            position absolute
            left 0
            bottom 0
            right 0
            color #ffffff
            display flex
            line-height .6rem
            background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
            .banner-title
                flex 1
                font-size .32rem
                padding 0 .2rem
            .banner-number
                padding 0 .4rem
                height .32rem
                line-height .32rem
                font-size .24rem
                border-radius .2rem
                margin-top 0.14rem
                background rgba(0,0,0,.8) 
                .banner-icon
                    font-size .24rem
</style>

